<template>
  <div class="bulk-shipment views-container">
    <el-dialog
      :title="'批量发货'"
      width="40%"
      :visible.sync="csvloadTableVisible"
      :modal-append-to-body="false"
    >
      <el-row>
        <el-col :span="24">
          <el-tag
            style="width:100%;margin-bottom:20px;"
            type="warning"
          >请先导出发货订单，填好物流信息，再导入文件即可。</el-tag>
        </el-col>
        <el-col
          :span="24"
          style="white-space:nowrap;"
        >

        </el-col>
        <el-col
          :span="24"
          class="flex-row flex-align-c flex-justify-c"
        >
          <el-button
            size="medium"
            type="primary"
            @click="importfxxData"
          >确定</el-button>
          <el-button
            size="medium"
            @click="csvloadTableVisible = false"
          >取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <div class="wlm-form">
      <div class="wlm-form-header">批量发货</div>
      <el-radio-group
        class="wlm-form-header-radio"
        style="padding-bottom:0;"
      >
        <div
          class="wlm-form-notice warning"
          style="margin-left: -41px;margin-top: -10px;"
        >
          <div>
            批量发货仅限待发货订单，重复导入数据将以最新导入的为准
          </div>
        </div>
      </el-radio-group>
      <div class="wlm-form-content">
        <el-form
          :ref="formFormatData.key"
          :model="formFormatData.formData"
          :rules="formFormatData.rules"
          size="small"
          label-width="120px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item
            label="导入发货模版"
            prop="username"
          >
            <div class="flex-row">
              <el-upload
                ref="uploadcsv"
                class="upload-demo input-with-select fin-min-width"
                :action="pathUrl"
                :on-remove="certRemove"
                :before-remove="certbeforeRemove"
                :on-change="certchange"
                :multiple="multiple"
                :accept="accept"
                :auto-upload="false"
                :limit="1"
                :on-success="certsuccess"
                :on-exceed="certhandleExceed"
                :file-list="certfileList"
              >
                <el-input v-model="formFormatData.formData.title" placeholder="" readonly class="upload-file"></el-input>
                <el-button
                  style="border-radius: 0 4px 4px 0;margin-left: -5px;"
                  size="small"
                  type="success"
                  plain
                >点击上传</el-button>
              </el-upload>
              <div>
                <el-button
                type="primary"
                style="margin-left:20px;"
                @click="importfxxData"
              >立即导入</el-button>
              </div>
              <div style="margin-left:20px;">
                <div>
                     <!-- <el-progress type="circle" class="progress pos-center" :percentage="$percentage" :width="50" :height="50"></el-progress> -->
                     <div class="mask-shadow" v-if="loading" :style="{opacity:loading? 1: 0}">
                        <span class="mask-shadow" v-loading="loading">
                            <el-progress class="progress pos-center" type="circle" :percentage="$percentage"></el-progress>
                        </span>
                      </div>
                </div>

              </div>


            </div>
            <el-button v-if="isIndependent" type="text" v-exceldown="{path:'web/doc/批量发货模版.csv', isBase: false}">下载发货模板</el-button>
            <el-button v-if="!isIndependent" type="text" v-exceldown="{path:'addons/weliam_areashop/web/doc/批量发货模版.csv', isBase: false}">下载发货模板</el-button>
            <el-button
              v-if="isIndependent"
              type="text"
              style="margin-left:20px;"
              v-exceldown="{path:'web/doc/物流公司对照表.xls', isBase: false}"
            >下载物流公司列表</el-button>
            <el-button
              v-if="!isIndependent"
              type="text"
              style="margin-left:20px;"
              v-exceldown="{path:'addons/weliam_areashop/web/doc/物流公司对照表.xls', isBase: false}"
            >下载物流公司列表</el-button>
          </el-form-item>
        </el-form>
        <div v-for="(item,index) in tips" :key="index" style="font-size:14px;margin-left:20px;">
          <!-- <div v-if="item.data==0" style="color:red;">{{item.msg}}</div> -->
          <el-tag type="danger" v-if="item.data==0" style="margin-top:10px;">{{item.msg}}</el-tag>
          <!-- <div v-if="item.data==1">{{item.msg}}</div> -->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  serviceGet
} from '@/api/merchandise'
import exceldown from '@/directive/exceldown'
import {
  orderInput,
  pollingSendGoods
} from '@/api/upload'

import { mapGetters } from 'vuex'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Form')],
  name: 'BulkShipment',
  components: {
  },
  directives: {
    exceldown
  },
  computed: {
    ...mapGetters([
      'independent'
    ]),
    pathUrl() {
      return '/uploadFile'
    },
    isIndependent() {
      return this.$store.getters.independent
    },
    $percentage(){
      let num  = (Number(this.countlis)/Number(this.count))*100

      num = num.toFixed(2)
      if(num>100){
        num =100
      }
      console.log("num666",num)
      return Number(num)
      console.log("sssssssssss",Number(this.countlis))
      console.log("llllllllllllll",Number(this.count))

    }
  },
  data() {
    return {
      loading:false,
      nowUpdateFile: 0,
      allUpdateFile: 100,
      countlis:0,
      // tips:'',
      // mag:'',
      tips:[],
      count:100,
      certfileList: [],
      multiple: false,
      accept: '.csv',
      uplistIsEmpty: false,
      csvloadTableVisible: false,
      formFormatData: {
        key: 'userForm',
        api: {
          editForm: {
            api: serviceGet,
            params: {
              id: ''
            }
          },
          submitForm: serviceGet
        },
        formData: {
          title: '',
          content: ''
        },
        rules: {
          // nickname: [{
          //   required: true,
          //   message: '请输入真实姓名',
          //   trigger: 'blur'
          // }],
          // username: [{
          //   required: true,
          //   message: '请输入用户手机号',
          //   trigger: 'blur'
          // },
          // {
          //   validator: mobile,
          //   trigger: 'blur'
          // }
          // ]
        }
      }
    }
  },
  methods: {
    importfxxData() {
      const isEmpty = this.uplistIsEmpty
      this.$confirm(
        `${
          !isEmpty
            ? '请先选择要导入的数据文件，格式是csv格式的，此功能是批量发货功能，流程是：先将要发货的订单导出为csv格式的文件，填好快递名称和编号后使用此功能导入。'
            : '导入前请先确定文件内是否已填写快递名称和编号，并且需要和平台订单编号一 一对应。否则可能导致数据出错！！！'
        }`,
        '提示信息',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          console.log(this.certfileList)
          const formData = new FormData()
          // 从选中的file对象里拿到数据
          this.certfileList.map((item, index) => {
            formData.append(
              `file`,
              item.raw
            )
          })
          orderInput(formData).then(files => {
              this.loading = true
            const { data: { code, msg } } = files
            console.log("ssssdffdfdfdsfdfd",files)
            this.count = files.data.data.count
            if (code === 1) {
              this.$message.success('发货成功')
               
              this.certfileList = [];
              // this.syncMaterial(syncMaterialCallBack,'news')
              this.pollingSend()
            } else {
              this.$message.error(msg)
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消'
          })
        })
    },
    certRemove(files, fileList) {
      this.certfileList = []
    },
    certbeforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    certhandleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    certchange(files, fileList) {
      console.log(files)
      this.certfileList.push(files)
      this.uplistIsEmpty = fileList.length > 0
    },
    certsuccess(files, fileList) {
      console.log(files, 'certsuccess')
      const issuccess = files.errno
      if (issuccess === 0) {
        this.dialogTableVisible = false
        this.clearFiles()
        this.loading = true
        this.getTabChangeLitsData('order')
      } else {
        this.$message.error('上传失败，请重试')
      }
    },
     pollingSend(){
        pollingSendGoods().then(items=>{
           const { data: { code, msg,data} } = items
         
          let b= ++this.countlis
            console.log("888888888sssssssssssss",this.count)
            console.log("ssssdffdffdfsdf",b)
          if(b<=this.count){
              this.pollingSend()
              // this.$message.success(msg)
              // this.msg = msg
              this.tips.push({data,msg})
              // this.$loading(options)
              // console.log("")
           }else{
             this.$message.success('批量发货完成！')
             this.loading = false
           }
          
        })     
        // pollingSendGoods().then(items=>{
        //    const { data: { code, msg } } = items
           
        //   if(code==1){
        //     this.pollingSend()
        //     this.$message.success(msg)
        //   }else{
        //     this.$message.error('丰富的好得很打电话')
        //   }
        // })   
      }
  }
}
</script>
<style lang="scss" scoped>
.bulk-shipment  {
  /deep/ .upload-file{
    border-radius: 4px 0 0 4px;
    .el-input__inner{
      border-radius: 4px 0 0 4px;
    }
  }
  .mask-shadow{
  // background: red;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /deep/ .circular{
        display: none;
    }
    .progress{
        z-index: 9999;
    }
}
}

</style>

